<template>
    <div>
        <h2>{{ $t('user.preferences.index.title') }}</h2>

        <div class="node-category">
            <h3 class="lead">{{ $t('user.preferences.index.account') }}</h3>
            <ul>
                <!-- <li class="edit-profile" v-for="(preference, key) in preferenceList" :key="preference.id">
                    <span class="a-box" @click="openPreference(preference)">{{ preference.description }}</span>
                </li> -->
                <li class="edit-profile">
                    <RouterLink class="a-box" to="/console/user/changePwd">{{ $t('user.preferences.index.change_pwd') }}</RouterLink>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

import { useMsgSetDrawerStore } from '@/stores/msgSetDrawer'
import { useUserStore } from '@/stores/user'

import UserService from '@/api/user'
import type { UserPreferences, CalendarPreference, DiscussionPreference, EditorPreference, LanguagePreference, MessagePreference, ResourcePreference } from '@/types/user'
import { goPage } from '@/utils/global'

const userStore = useUserStore()
const loading = ref(false)

const preferenceList = ref<UserPreferences>()
function getUserPreference() {
    loading.value = true
    if (!userStore.userinfoL) return
    UserService.preference(userStore.userinfoL.id)
        .then(res => {
            preferenceList.value = res
        })
        .finally(() => {
            loading.value = false
        })
}
const openPreference = (preference: CalendarPreference | DiscussionPreference | EditorPreference | LanguagePreference | MessagePreference | ResourcePreference) => {
    switch (preference.key) {
        case 'calendar_preferences':
            // 行事曆个性化设置
            goPage(`/console/user/preferences/calendar`)
            break
        case 'discussion_preferences':
            // 讨论区个性化设置
            goPage(`/console/user/preferences/forum`)
            break
        case 'editor_preferences':
            // 編輯器偏好
            goPage(`/console/user/preferences/editor`)
            break
        case 'language':
            // 偏愛的語言
            goPage(`/console/user/preferences/language`)
            break
        case 'message_preferences':
            // 訊息偏好
            openMsgSetDrawer()
            break
        case 'resource_preferences':
            // 教材库个性化设置
            goPage(`/console/user/preferences/contentbank`)
            break
    }
}

const msgSetDrawerStore = useMsgSetDrawerStore()
const openMsgSetDrawer = () => {
    msgSetDrawerStore.openMsgSetDrawer()
}

watch(
    () => userStore.userinfoL,
    () => {
        getUserPreference()
    },
)

onMounted(() => {
    getUserPreference()
})
</script>

<style lang="less" scoped>
h2 {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

.node-category {
    margin-bottom: 15px;
    border-radius: 2px;
    padding: 15px;
    border: 1px solid #e3e3e3;
    background-color: #fcfcfc;

    .lead {
        margin-bottom: 18px;
        border-radius: 2px;
        border-left: 2px solid #f06423;
        padding: 4px 15px;
        font-size: 18px;
        font-weight: 400;
        background-color: rgba(0, 0, 0, 0.05);
        background-image: url(@/assets/img/strip2_black8.svg);
    }

    ul {
        li {
            margin-bottom: 5px;
            color: #4c4c4c;
            font-size: 15px;
            line-height: 1.666;

            .a-box {
                color: #4c4c4c;
                transition: color 0.35s ease-in-out;
                display: block;
                cursor: pointer;

                &:hover {
                    color: #f06423;
                }
            }
        }
    }
}
</style>
